<template>
  <el-dialog
    class="basic-dialog"
    :model-value="visible"
    title="登录记录"
    width="1000"
    :close-on-click-modal="!loading"
    :close-on-press-escape="!loading"
    :show-close="!loading"
    @closed="handleClosed"
    @open="handleDialogOpen"
  >
    <div class="-mx-4">
      <el-select v-model="queryParams.admin_id" class="w-[150px] mb-4 -mt-2">
        <el-option label="全部账号" value="" />
        <el-option
          v-for="item in adminList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-table
        v-loading="loading"
        :data="tableData"
        class="basic-table"
        :tooltip-options="{ popperClass: 'basic-tooltip' }"
        flexible
        height="420"
      >
        <template #empty><TableEmpty /></template>
        <el-table-column prop="login_at" label="登录时间" width="180">
          <template #default="{ row }">
            <span v-format-unix="row?.login_at"></span>
          </template>
        </el-table-column>
        <el-table-column label="账号" width="120" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-format-table-cell="row.username"></span>
          </template>
        </el-table-column>
        <el-table-column label="登录IP" width="165" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-format-table-cell="row.login_ip"></span>
          </template>
        </el-table-column>
        <el-table-column label="所在地" width="150" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-format-table-cell="row.login_addr"></span>
          </template>
        </el-table-column>
        <el-table-column label="系统版本" min-width="150">
          <template #default="{ row }">
            <span v-format-table-cell="row.system_info"></span>
          </template>
        </el-table-column>
        <el-table-column label="浏览器版本" min-width="150">
          <template #default="{ row }">
            <span v-format-table-cell="row.browser_info"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pt-4">
      <basic-pagination
        :pagination="pagination"
        @change="getList()"
      ></basic-pagination>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { useListRequest } from '@/hooks/useListRequest'
import { useSelectRemote } from '@/hooks/useSelectRemote'

interface IProps {
  visible: boolean
}

interface IEmits {
  // 更新 显示状态
  (event: 'update:visible', value: boolean): void
}

const emit = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {})

const queryParams = reactive({
  admin_id: ''
})
watch(
  () => queryParams.admin_id,
  () => {
    pagination.page = 1
    getList()
  }
)

/**
 * 列表数据
 */
const {
  data: tableData,
  getList,
  loading,
  pagination
} = useListRequest(loginRecordListApi, queryParams)
onMounted(() => getList())

/**
 * 管理员列表
 */
const { remoteMethod, opts: adminList } = useSelectRemote(adminListApi, {
  valueKey: 'id',
  labelKey: 'username',
  queryKey: ''
})

remoteMethod('')

watch(
  () => props.visible,
  val => val && remoteMethod('')
)

/**
 * @description dialog 打开事件
 */
const handleDialogOpen = () => {}

/**
 * @description dialog 关闭前事件
 */
const handleClosed = () => {
  emit('update:visible', false)
}
</script>

<style scoped></style>
